<style>
.progress_complete{ border:1px solid #B9B9B9; border-radius:3%; 
    margin-bottom: 20px;
    overflow: hidden;
    background-color: #f5f5f5;
    border-radius: 4px; padding:5px;
}
.progress_complete p{ margin:0px;}
</style>
<div class="span10" id="datacontent" style="width:100%; margin:0 auto;">
	 
 
		<div class="tab-content with-padding">
			 
			<div style="padding-top:10px;" >
				<form enctype="multipart/form-data"    class="form-horizontal"  id="video_from" action="<{:addons_url('Upload/Index/upload_video')}>" method="post">
					<div class="form-group">
						<div class="col-sm-6" style="position:relative" > <a  class="btn btn-default"> <i class="fa fa-plus" ></i>上传视频</a>
							<input onchange="video_from()"  style="position:absolute; top:0px ; height:42px; left:0px; opacity: 0;-moz-opacity:0;filter:alpha(opacity=0);"   type="file" name="imgFile" id="video_from_file"/>
						</div>
					</div>
					<input type="submit" name="提交">
				</form>
				<p>上传进度：</p>
				<div class="progress_list">
					<div class="progress_one">
					<div class="progress">
						<div class="progress-bar progress-bar-striped active" id="video-progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width:0%"> <span class="sr-only">0% </span> </div> 
					</div>
					
				</div>
				
				
			</div>
       	<div class="form-group">
						<div class="col-sm-6" align="center"> <a   data-dismiss="modal" aria-label="Close" class="btn btn-default">确定</a>	 
						</div>
					</div>
          <div class="clearfix"></div>
		</div>
	</div>
 
</div>
 
<script >
 var mysetInterval;
function video_from(){
	var options = {  
		 //  target: '#output',          //把服务器返回的内容放入id为output的元素中      
		   beforeSubmit: showRequest,  //提交前的回调函数  
		   success:function(response) { 
				clearInterval(mysetInterval);
				UploadComplete(response);	//上传完成
			},      //提交后的回调函数  
		}  
   		$("#video_from").ajaxSubmit(options); 
}
	   
//开始上传中
function showRequest(){
	$("#video-progress-bar").width("0.1%");
	$(".sr-only").text("0.1%");
	// mysetInterval=setInterval(uploading,3000);
}	 
//完成上传了
function UploadComplete(response){
	 var json = eval('(' + response + ')'); 
	 if(json.error>0){
		 dialog(json.msg);
		 return false;
	 }
	// console.log(json);
	 var html='<div class="progress_complete"><p>'+json.data.fileName+json.data.FlagString+'</p><p>'+json.data.location+'</p></div></div>';
	 $(".progress_list .progress_one").html(html);
	 $(document).trigger("videoUploadSuceess",[json]);
}
//上传中
function uploading(){
	var fileName_str=$("#video_from_file").val();
	var pos = fileName_str.lastIndexOf("\\")*1;
	if(pos==-1){
		 pos = fileName_str.lastIndexOf("/")*1;	
	}
    fileName= fileName_str.substring(pos+1);
	$.getJSON("<{:addons_url('Upload/Index/progress')}>",{fileName:fileName},function(data){
			$("#video-progress-bar").width(data+"%");
			$(".sr-only").text(data+"%");
	})
}
		
 
</script> 

